<template>
  <div class="container">
    <div class="header">详情</div>
    <StatusBar :item="orderStateMap[detailData.trade_state]"/>
    <div class="tips">
      <div class="dzf" v-if="detailData.trade_state === '待支付'">
        <div class="text1">订单待支付</div>
        <div class="text2">请在
          <counter :second="second"/>
          内完成支付，超时订单自动取消
        </div>
        <div class="text3">
          <van-button type="success" @click="show =true">立即支付{{ detailData.price }}元</van-button>
        </div>
      </div>
      <div class="dzf" v-if="detailData.trade_state === '待服务'">
        <div class="text1">正在为您安排服务专员...</div>
        <div class="text2">请保持手机畅通，稍后将有服务专员与您联系</div>
      </div>
      <div class="dzf" v-if="detailData.trade_state === '已完成'">
        <div class="text1">服务已完成</div>
        <div class="text2">感谢您的使用，如有售后问题请联系客服</div>
      </div>
      <div class="dzf" v-if="detailData.trade_state === '已取消'">
        <div class="text1">订单已取消</div>
        <div class="text2">期待下次为您服务，如有帮助可咨询客服</div>
      </div>
    </div>
    <van-cell-group class="card">
      <div class="header-text">预约信息</div>
      <van-cell v-for="(item,key) in makeInfo"
                :key="key"
                :title="item"
                :value="formatData(key)"></van-cell>
    </van-cell-group>

    <van-cell-group class="card">
      <div class="header-text">订单信息</div>
      <van-cell v-for="(item,key) in orderInfo"
                :key="key"
                :title="item"
                :value="formatData(key)"></van-cell>
    </van-cell-group>

    <!--二维码自定义弹框-->
    <van-dialog v-model:show="show" :showConfirmButton="false">
      <van-icon name="cross" class="close" @click="closeCode"/>
      <div>微信支付</div>
      <van-image width="150" height="150" :src="qrcodeUrl"/>
      <div>请使用本人微信扫描二维码</div>
    </van-dialog>
  </div>
</template>
<script setup>
import {getCurrentInstance, onMounted, ref, computed} from "vue"
import {useRouter, useRoute} from "vue-router"
import Counter from '../../components/counter.vue'
import StatusBar from "../../components/statusBar.vue";
import Qrcode from 'qrcode'

const show = ref(false)
const qrcodeUrl = ref('')

const router = useRouter()
const route = useRoute()
// 获取当前vue实例
const {proxy} = getCurrentInstance()

//订单详情数据
const detailData = ref({})
//订单状态枚举
const orderStateMap = {
  '待支付': 10,
  '待服务': 20,
  '已完成': 30,
  '已取消': 40
}

onMounted(async () => {
  // 获取订单列表页面数据
  const {data} = await proxy.$api.orderDetail(route.query.oid)
  if (data.code === 10000) {
    detailData.value = data.data
    Qrcode.toDataURL(data.data.code_url).then((url) => {
      qrcodeUrl.value = url
    })
  }
})
//总的支付时间2小时
const payTime = ref(7200000)
//计算订单倒计时
const second = computed(() => {
  return detailData.value.order_start_time + payTime.value - new Date().getTime()
})

//关闭二维码弹窗
const closeCode = () => {
  show.value = false
  //router.push('/order')
}

//订单详情
const makeInfo = {
  service_name: '预约服务',
  hospital_name: '就诊医院',
  starttime: '期望就诊时间',
  'client.name': '就诊人',
  'client.mobile': '就诊人电话',
  receiveAddress: '接送地址',
  demand: '其他需求'
}
const orderInfo = {
  tel: '就诊人电话',
  order_start_time: '下单时间',
  price: '应付金额',
  out_trade_no: '订单编号'
}

const formatData = (key) => {
  if (key.indexOf(".") === -1) {
    if (key === "order_start_time") {
      return formatTimestamp(detailData.value[key]);
    }
    return detailData.value[key];
  }
  let arr = key.split(".").reduce((o, p) => {
    return (o || {})[p];
  }, detailData.value);
  return arr;
}

function formatTimestamp(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以需要+1
  const day = String(date.getDate()).padStart(2, "0");

  return `${year}-${month}-${day}`;
}
</script>
<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}

.header {
  background-color: #fff;
  line-height: 40px;
  text-align: center;

  .header-left {
    float: left;
  }
}

.card {
  margin: 15px 0;
  padding: 10px;

  .header-text {
    padding-left: 5px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid red;
  }
}

.dzf {
  padding: 20px;

  .text1 {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: #666;
  }

  .text2 {
    font-size: 14px;
    color: #666;
  }

  .text3 {
    text-align: center;

    .van-button {
      margin-top: 10px;
      margin-left: 10px;
      width: 80%;
      font-weight: bold;
    }
  }
}

::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;

  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
